import React, { useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import { Avatar } from '@nutui/nutui-react-taro';
import './index.scss';
import { BASE_URL } from '../../../services/request';
import { useInfoStore } from '../../../store/useInfoStore';
const Profile = () => {

  // Default user info with initial state
  const userInfo = useInfoStore(state => state.info);
  const domain = useInfoStore(state => state.domain);

  // Memoized avatar URL to prevent unnecessary recalculations
  const userAvatar = useMemo(() => {
    return userInfo?.picture ? `${BASE_URL}${userInfo.picture}` : '';
  }, [userInfo?.picture]);


  // Render skill tags component
  const renderSkillTags = () => {
    if (!domain) return <View className="no-skills">暂无擅长领域</View>;
    return domain.join('、');
  };

  return (
    <View className="profile-page">
      {/* Header with user avatar and name */}
      <View className="profile-header">
        <View className="avatar-container">
          <Avatar
            size="large"
            src={userAvatar}
            className="user-avatar"
          />
        </View>
        <Text className="user-name">{userInfo?.name}</Text>
      </View>

      {/* Basic information section */}
      <View className="card">
        <View className="card-header">
          <Text className="card-title">基本信息</Text>
        </View>
        <View className="info-list">
          <View className="info-item">
            <Text className="info-label">学号</Text>
            <Text className="info-value">{userInfo?.id}</Text>
          </View>
          <View className="info-item">
            <Text className="info-label">班级</Text>
            <Text className={`info-value ${userInfo?.major === 'empty' ? 'empty-value' : ''}`}>
              {userInfo?.major !== 'empty' ? userInfo?.major : '未设置'}
            </Text>
          </View>
          <View className="info-item">
            <Text className="info-label">部门</Text>
            <Text className="info-value">{userInfo?.department}</Text>
          </View>
          <View className="info-item">
            <Text className="info-label">领域</Text>
            <View className="skills-list">
              {renderSkillTags()}
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Profile;